<template>
  <view class="container">
    <uni-segmented-control
      :current="currentIndex"
      :values="items"
      style-type="text"
      active-color="#007aff"
      @clickItem="onClickItem"
    />
    <view v-if="currentIndex == 0">
      <view style="padding-top: 10px"></view>
      <uni-forms
        ref="baseForm"
        :modelValue="chuanyueForm"
        labelPosition="left"
        border
        labelWidth="100px"
      >
        <view style="padding-top: 10px"></view>

        <uni-forms-item label="收文单位" required>
          <uni-easyinput type="text" v-model="chuanyueForm.danwei" />
        </uni-forms-item>

        <uni-forms-item label="文号">
          <uni-easyinput type="text" v-model="chuanyueForm.wenhao" />
        </uni-forms-item>

        <uni-forms-item label="标题" required>
          <uni-easyinput type="text" v-model="chuanyueForm.biaoti" />
        </uni-forms-item>

        <uni-forms-item label="收文时间" required>
          <uni-datetime-picker
            @click="chuanci()"
            @change="chuanci2"
            @maskClick="chuanci2()"
            type="date"
            return-type="string"
            v-model="chuanyueForm.shouwenDate"
          />
        </uni-forms-item>

        <uni-forms-item label="内容摘要">
          <uni-easyinput
            type="textarea"
            @change="chuanci2"
            @input="chuanci2"
            v-model="chuanyueForm.zhaiyao"
          />
        </uni-forms-item>

        <!-- 附件模块 -->
        <uni-forms-item label="附件" required></uni-forms-item>
        <view v-for="(item, index) in files.values()" :key="index">
          <view v-if="item.type == 'success' && item.size <= 1048576"
            >[{{ (item.size / 1024).toFixed(2) }}KB]
            {{ item.name.substring(0, 30) }}
          </view>
          <view v-if="item.type == 'success' && item.size > 1048576"
            >[{{ (item.size / 1048576).toFixed(2) }}MB]
            {{ item.name.substring(0, 30) }}
          </view>
          <view v-if="item.type != 'success'"
            ><i style="color: royalblue">上传{{ item.progress }}%</i>
            {{ item.name.substring(0, 30) }}</view
          >
        </view>
        <lsj-upload
          ref="lsjUpload"
          childId="upload1"
          height="40px"
          :size="uploadconfig.size"
          :instantly="uploadconfig.instantly"
          :formats="uploadconfig.formats"
          :option="option"
          @change="onChange"
          @progress="onprogress"
          @uploadEnd="onuploadEnd"
        >
          <button class="btn-fujian" @click="fuckyou">添加附件</button>
        </lsj-upload>
        <view class="tips"
          >说明：从此上传图片将无法预览，单个文件请控制在100MB以内</view
        >

        <!-- 选人模块 -->
        <uni-forms-item label="审核人" required></uni-forms-item>
        <view v-for="(item, idx) in chuanyueForm.auditors" :key="idx">
          <uni-row>
            <uni-col :span="10">
              <view v-if="idx > 0" class="step-arrow">
                <uni-icons
                  type="bottom"
                  size="mini"
                  color="#a5eaff"
                ></uni-icons>
              </view>
            </uni-col>
          </uni-row>

          <view class="step">
            <uni-row>
              <uni-col :span="10">
                <view class="step-info-left">{{
                  item.stepName || item.positionName
                }}</view>
              </uni-col>
              <uni-col :span="14">
                <view class="step-info-right">{{ item.name }}</view>
              </uni-col>
            </uni-row>
          </view>
        </view>

        <view style="padding-top: 30px"></view>
        <button type="primary" @click="clickApply">提交</button>
      </uni-forms>
    </view>

    <view v-if="currentIndex === 1">
      <view>
        <uni-search-bar
          v-model="keyword"
          radius="100"
          placeholder="输入文件关键字"
          cancelButton="none"
          @confirm="search"
        />
      </view>
      <view
        v-for="(item, idx) in applyRecord"
        style="padding-bottom: 10px"
        :key="idx"
      >
        <!-- {{item}} -->
        <view class="card" @click="seeDetail(idx)">
          <view class="card-title">
            <uni-row>
              <uni-col :span="20">
                <view class="card-title-left">&nbsp;{{ item.biaoti }}</view>
              </uni-col>
              <uni-col :span="4">
                <view class="card-title-right">
                  <uni-tag
                    text="审核"
                    size="mini"
                    type="warning"
                    v-if="item.sta === 0 && item.chexiao == 0"
                  ></uni-tag>
                  <uni-tag
                    text="通过"
                    size="mini"
                    type="primary"
                    v-if="item.sta === 1 && item.chexiao == 0"
                  ></uni-tag>
                  <uni-tag
                    text="拒绝"
                    size="mini"
                    type="error"
                    v-if="item.sta === 2 && item.chexiao == 0"
                  ></uni-tag>
                  <uni-tag
                    text="撤销"
                    size="mini"
                    type="default"
                    v-if="item.chexiao === 1"
                  ></uni-tag>
                </view>
              </uni-col>
            </uni-row>
          </view>
          <view class="card-body">
            <view>{{
              item.attaches.length > 0 ? item.attaches[0].name : ""
            }}</view>
          </view>
          <view class="card-footer">
            <uni-row>
              <uni-col :span="12">
                <view class="card-footer-left">
                  {{ item.uName }}
                </view>
              </uni-col>
              <uni-col :span="12">
                <view class="card-footer-right">
                  {{
                    getFormatedTimeStr(item.createTime, "YYYY-MM-DD hh:mm:ss")
                  }}
                </view>
              </uni-col>
            </uni-row>
          </view>
        </view>
      </view>
      <uni-load-more :status="moreStatus"></uni-load-more>
    </view>
  </view>
</template>

<script>
import moment from "moment";
import { websock } from "../../net/websock";
import { uploadconfig } from "../../const";
import { quchongAuditors } from "../../utils/util";

export default {
  data() {
    return {
      // 上传参数部分没有事情不要乱动
      uploadconfig,
      option: {
        url: uploadconfig.url,
        name: "file",
        header: {},
        formData: {},
      },
      formats: uploadconfig.formats,
      instantly: uploadconfig.instantly,
      size: uploadconfig.size,
      files: new Map(),
      // 上传参数部分没有事情不要乱动

      items: ["发起提交", "查看数据"],

      currentIndex: 0,

      moreStatus: "more",
      applyRecord: [],

      keyword: "",

      chuanyueForm: {
        danwei: "",
        wenhao: "",
        biaoti: "",
        shouwenDate: "",
        readers: [],
        pics: [],
        attaches: [],
        auditors: [],
      },
    };
  },
  async onReady() {
    this.getNewestRecord();

    let auditors = await websock.getAuditors({ typ: 17 });
    console.log("auditors", auditors);
    quchongAuditors(auditors);
    this.chuanyueForm.auditors = auditors;
  },
  // 下拉刷新，获取最新的数据
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
    if (this.currentIndex == 0) {
      uni.stopPullDownRefresh();
    } else {
      this.getNewestRecord();
    }
  },
  // 上拉刷新，获取历史数据
  onReachBottom() {
    console.log("onReachBottom");
    if (this.currentIndex == 1) {
      this.getOlderRecord();
    }
  },
  methods: {
    // 附件上传恶心的代码块-------------------------------------------------------------
    // 某文件上传结束回调(成功失败都回调)
    onuploadEnd(item) {
      console.log("fuck you", 3);
      if (item.type == "fail") {
        return uni.showToast({ title: "上传失败" });
      }
      try {
        let res = JSON.parse(item.responseText);
        if (res.code !== 0) {
          return uni.showToast({ title: res.message || "error" });
        }
        this.chuanyueForm.attaches.push({ name: item.name, path: res.data });
      } catch (err) {
        uni.showToast({ title: err.message });
      }
      this.$forceUpdate();
    },
    // 上传进度回调
    onprogress(item) {
      this.files.set(item.name, item); // 更新当前状态变化的文件
      this.$forceUpdate(); // 强制更新视图
    },
    // 文件选择回调
    onChange(files) {
      this.files = files; // 更新选择的文件
      this.$forceUpdate(); // 强制更新视图
    },
    // 穿刺一击让他们的遮罩层消失
    chuanci() {
      this.$refs.lsjUpload && this.$refs.lsjUpload.hide();
    },
    // 穿刺一击让他们的遮罩层消失
    chuanci2() {
      this.$refs.lsjUpload && this.$refs.lsjUpload.show();
      this.$forceUpdate();
    },
    // 强制重置附件按钮,万一出意外点2次按钮至少可以进去
    fuckyou() {
      this.$refs.lsjUpload && this.$refs.lsjUpload.hide();
      this.$refs.lsjUpload && this.$refs.lsjUpload.show();
      this.$forceUpdate();
    },
    // 附件上传恶心的代码块-------------------------------------------------------------
    // 获取最新的通知
    async getNewestRecord() {
      try {
        if (this.applyRecord.length == 0) {
          let res = await websock.chuanyueWenjianRecord({
            pageCount: 10,
            keyword: this.keyword,
          });
          console.log("getRecordList list empty", res);
          uni.stopPullDownRefresh();
          this.applyRecord = [...res, ...this.applyRecord];
        } else {
          let res = await websock.chuanyueWenjianRecord({
            greaterThan: this.applyRecord[0].id,
            pageCount: 10,
            keyword: this.keyword,
          });
          console.log("getRecordList list not empty", res);
          uni.stopPullDownRefresh();
          this.applyRecord = [...res, ...this.applyRecord];
        }
      } catch (e) {
        uni.showToast({
          title: e.message,
        });
      }
    },
    // 获取老的数据
    async getOlderRecord() {
      this.moreStatus = "loading";
      try {
        if (this.applyRecord.length == 0) {
          console.log("before get list empty");
          let res = await websock.chuanyueWenjianRecord({
            pageCount: 10,
            keyword: this.keyword,
          });
          console.log("getOlderRecord list empty", res);
          this.applyRecord = [...this.applyRecord, ...res];
          if (res.length < 10) {
            this.moreStatus = "noMore";
          } else {
            this.moreStatus = "more";
          }
        } else {
          console.log("before get list not empty");
          let res = await websock.chuanyueWenjianRecord({
            lessThan: this.applyRecord[this.applyRecord.length - 1].id,
            pageCount: 10,
            keyword: this.keyword,
          });
          console.log("getOlderRecord list not empty", res);
          this.applyRecord = [...this.applyRecord, ...res];
          if (res.length < 10) {
            this.moreStatus = "noMore";
          } else {
            this.moreStatus = "more";
          }
        }
      } catch (e) {
        uni.showToast({
          title: e.message,
        });
      }
    },
    qingjiaTypChange(e) {
      console.log(e.detail.value);
      this.chuanyueForm.typ = e.detail.value;
    },
    qingjiaTypeStr() {
      return this.typeStrs[this.chuanyueForm.typ];
    },
    qingjiaDaysStr() {
      if (this.chuanyueForm.startDate == "" || this.chuanyueForm.endDate == "")
        return "";
      let diffDays = moment(this.chuanyueForm.endDate).diff(
        moment(this.chuanyueForm.startDate),
        "day"
      );
      if (diffDays < 0) return "";
      return diffDays + 1 + " 天";
    },

    clickSelectReader() {
      uni.navigateTo({
        url:
          "/pages/common/contactSelect?selectedUsers=" +
          JSON.stringify(this.chuanyueForm.readers || []),
        events: {
          contactList: (data) => {
            console.log("select auditor", data);
            this.chuanyueForm.readers = data.contactList;
          },
        },
      });
    },

    clickSelectAuditor() {
      uni.navigateTo({
        url:
          "/pages/common/contactSelect?selectedUsers=" +
          JSON.stringify(this.chuanyueForm.auditors || []),
        events: {
          contactList: (data) => {
            console.log("select auditor", data);
            this.chuanyueForm.auditors = data.contactList;
          },
        },
      });
    },
    clickSelectfuzeren() {
      uni.navigateTo({
        url: "/pages/common/contactSelect?extraKey=auditor1",
        events: {
          contactInfo: (data) => {
            console.log("select auditor", data);
            this.chuanyueForm.fuzeren = data.contactInfo;
          },
        },
      });
    },
    rmfuzeren() {
      this.chuanyueForm.fuzeren = null;
    },
    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = "MM-DD HH:mm:ss") {
      return moment(stamp).format(str);
    },
    async clickApply() {
      console.log("click chuanyue", this.chuanyueForm);

      if (!this.chuanyueForm.danwei)
        return uni.showToast({
          title: "请输入收文单位",
        });
      if (!this.chuanyueForm.biaoti)
        return uni.showToast({
          title: "请输入标题",
          icon: "none",
        });
      if (!this.chuanyueForm.shouwenDate)
        return uni.showToast({
          title: "请选择收文日期",
          icon: "none",
        });

      if (this.chuanyueForm.auditors.length == 0)
        return uni.showToast({
          title: "请选择审核人",
          icon: "none",
        });

      // #ifndef H5
      if (this.chuanyueForm.attaches.length == 0)
        return uni.showToast({
          title: "请添加附件",
          icon: "none",
        });
      // #endif

      let readers = [];
      for (let i = 0; i != this.chuanyueForm.readers.length; i++) {
        readers.push({
          uid: this.chuanyueForm.readers[i].uid,
          name: this.chuanyueForm.readers[i].name,
        });
      }

      let auditors = [];
      for (let i = 0; i != this.chuanyueForm.auditors.length; i++) {
        auditors.push({
          uid: this.chuanyueForm.auditors[i].uid,
          stepName:
            this.chuanyueForm.auditors[i].stepName ||
            this.chuanyueForm.auditors[i].positionName,
        });
      }

      try {
        await websock.chuanyueWenjian({
          danwei: this.chuanyueForm.danwei,
          wenhao: this.chuanyueForm.wenhao,
          biaoti: this.chuanyueForm.biaoti,
          shouwenDate: this.chuanyueForm.shouwenDate,
          zhaiyao: this.chuanyueForm.zhaiyao || "",
          pics: this.chuanyueForm.pics,
          attaches: this.chuanyueForm.attaches || [],
          readers,
          auditors,
        });

        uni.showToast({ title: "申请成功" });

        this.files = new Map();
        this.chuanyueForm = {
          danwei: "",
          wenhao: "",
          biaoti: "",
          shouwenDate: "",
          zhaiyao: "",
          readers: [],
          pics: [],
          attaches: [],
        };

        this.currentIndex = 1;
        this.getNewestRecord();
      } catch (err) {
        uni.showToast({
          title: err.message || "error",
        });
      }
    },

    async revertApply(idx) {
      try {
        await websock.revertChuanyueWenjian({
          id: this.applyRecord[idx].id,
        });
        this.applyRecord[idx].sta = 4;
      } catch (err) {
        console.error(err);
        uni.showToast({
          title: err.message || "error",
        });
      }
    },
    seeDetail(idx) {
      uni.navigateTo({
        url: `/pages/task/chuanyueWenjianDetail?id=${this.applyRecord[idx].id}`,
      });
    },
    search() {
      console.log("search", this.keyword);
      this.applyRecord = [];
      this.getNewestRecord();
    },

    onClickItem(e) {
      if (this.currentIndex !== e.currentIndex) {
        this.currentIndex = e.currentIndex;
      }
    },
  },
};
</script>

<style>
@import "../common/common.css";
</style>
